<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId">
    <template v-slot:common>
      <div class="wb-head" :style="headStyles">
        <div class="head-con" :style="headConStyle" v-if="dataKeys && dataKeys.pic_url && this.getVariableItem">
          <img v-if="this.getVariableItem.avatar_large" crossOrigin="anonymous" @click.stop :src="this.getVariableItem.avatar_large" :style="imgStyle" @load="onImgLoaded">
          <img v-else @click.stop :src="this.getVariableItem.pic_url" :style="imgStyle">
          <img v-if="commonAttr.borderImgUrl" @click.stop :src="commonAttr.borderImgUrl" :style="headBorderStyle" class="head-border">
        </div>
        <div class="user-name" :style="pStypes" v-if="dataKeys && dataKeys.name">
          <p @click.stop class="margin-top-8" :style="userNameAlign">
            {{ getUserName }}
          </p>
          <p v-if="commonAttr.nameSuffix" :style="nameSuffixFontSize" class="margin-left-10  margin-top-4">{{ commonAttr.nameSuffix }}</p>
          <p v-if="commonAttr.userDescription" :style="nameSuffixFontSize"> {{commonAttr.userDescription}} </p>
        </div>
        <van-button v-if="dataKeys && dataKeys.follow" :style="btnStyles" class="item-in-btn btn-follow margin-top-8">{{btnTitle}}</van-button>
      </div>
    </template>
  </inject-template>
</template>
<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { getPxOVwByValue, getPxOrVw } from '@/store/utils'

export default {
  mixins: [utils],
  setup () {
    return {
      headConStyle: {
        marginRight: getPxOVwByValue(12)
      }
    }
  },
  components: {
    InjectTemplate,
  },
  computed: {
    headBorderStyle(){
      let unit = getPxOrVw()
      let styles_ = {}
      let commonAttr = this.item.commonAttr
      if(commonAttr.width > 0){
        styles_.width = commonAttr.width + unit
        styles_.height = commonAttr.height + unit
      }else{
        styles_.width = "100%"
        styles_.objectFit = "contain"
      }
      if(this.item.commonAttr.flexDirection == "column"){
        styles_.left = "50%";
        styles_.top = 0;
        styles_.transform = "translate(-50%, 0)";
      }else{
        styles_.left = "0";
        styles_.top = "50%";
        styles_.transform = "translate(0, -50%)";
      }
      return styles_
    },
    userNameAlign(){
      return {
        textAlign: this.item.commonAttr.textAlign
      }
    },
    getUserName(){
      if(!this.getVariableItem) return ''
      let name = this.getVariableItem.name;
      if(this.commonAttr.namePrefix && this.commonAttr.namePrefix.length > 0){
        name = this.commonAttr.namePrefix + name;
      }
      if(name && name.length > this.commonAttr.nameNum){
        name = name.substring(0, this.commonAttr.nameNum) + '...';
      }
      return name
    },
    pStypes(){
      let unit = getPxOrVw();
      let styles_ = _.cloneDeep(this.styles);
      delete styles_.flexDirection
      delete styles_.border;
      delete styles_.borderRadius;

      let pWidth = 'auto';
      let pHeight = 'auto';
      if(this.item.commonAttr.flexDirection == "column"){
        pWidth = 'inherit'
        styles_.margin = this.commonAttr.marginTB + unit + ' 0 0 0'; 
      }else{
        let conAttrWid = getPxOVwByValue(this.item.conAttr.width);
        pWidth = conAttrWid - this.commonAttr.width - this.commonAttr.marginLR + unit;
        pHeight = 'inherit';
        styles_.margin = '0 0 ' + this.commonAttr.marginTB + unit + ' ' + this.commonAttr.marginLR + unit; 
      }
      styles_.width = pWidth;
      styles_.height = pHeight;
      styles_.lineHeight = this.item.commonAttr.lineHeight ? this.item.commonAttr.lineHeight : 1;
      return styles_;
    },
    headStyles(){
      let styles_ = _.cloneDeep(this.styles);
      delete styles_.border;
      delete styles_.borderRadius;
      delete styles_.backgroundColor;
      delete styles_.lineHeight;
      delete styles_.margin;
      return styles_;
    }
  },
  methods: {
    onImgLoaded(){
      if(this.isH5Edit){
        return
      }
      this.item.commonAttr.isLoadedImg = true;
    },
  },
  beforeUnmount(){
    if(this.isH5Edit){
      return
    }
    this.item.commonAttr.isLoadedImg = false;
  }
};
</script>
<style lang="scss">
.wb-head {
  width: inherit;
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;

  .user-name{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  .head-con{
    position: relative;
    width: inherit;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .head-border{
      position: absolute;
    }
    img{
      border-radius: 50%;
      object-fit: cover; 
      object-position: center;
      transition: all 0.2s ease;
    }
  }
  p{
    width: inherit;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
